<template>
  <!-- 首页推荐项目及列表 -->
  <div class="project-rec">
   <!-- 推荐项目 -->
        <div class="project-recommendation">
            <!-- <p class="title_p" v-if="  this.$store.state.userinfo.type==1">推荐项目</p> -->
            <p class="title_p">项目大厅</p>
            <router-link to="/projects">
                <span>更多</span>
                <svg class="icon icon-po" aria-hidden="true" >
                    <use xlink:href="#icon-shang-copy-copy-copy"></use>
                </svg>
            </router-link>
        </div>
        <!-- 项目列表 -->
        <div class="project-list">
            <!-- 每一个收藏的项目 -->
            <router-link class="project-item" :to="'/projects/detail/'+item.id" v-for="(item,index) in Projects" :key="index">
                <p class="project-item-1">
                    <span class="item1-left">{{item.name}}</span>
                    <span class="item1-right" v-if="item.status=='招募中'">{{item.status}}</span>
                    <span class="item1-right doing" v-if="item.status=='进行中'">{{item.status}}</span>
                    <span class="item1-right done" v-if="item.status=='已完成'">{{item.status}}</span>
                    <span class="item1-right doing" v-if="item.status=='竞标中'">{{item.status}}</span>
                </p>
                <div class="project-item-2">
                    <p class="project-item-type item">
                        <svg class="icon price-bottom-01" aria-hidden="true">
                            <use xlink:href="#icon-leixing"></use>
                        </svg>
                        <span class="type-special">类型：</span>
                        <span>{{item.type}}</span>
                    </p>
                    <p class="project-item-price item">
                        <span class="price-left" v-if="item.isbargaining">可议价</span>
                        <span class="price-right">￥{{item.price}} 万元</span>
                    </p>
                </div>
                <div class="project-item-2">
                    <p class="project-item-time item">
                        <svg class="icon price-bottom-01" aria-hidden="true">
                            <use xlink:href="#icon-zhouqifuwushiduan"></use>
                        </svg>
                        <span class="type-special">周期：</span>
                        <span>{{item.duration}}</span>
                    </p>
                </div>
                <div class="project-item-3">
                    <p class="item3-left">
                        <span>{{item.addtime}}</span>
                        <span class="fenge"></span>
                        <span>{{item.signUpNum}}人报名</span>
                    </p>
                    <p  class="item3-right">
                        <span>{{item.addtime}}</span>
                        <span>发布</span>
                    </p>
                </div>
            </router-link>
        </div>
    </div>    
</template>
<script>
import { GetProjects } from "@/api/index";
export default {
  data() {
    return {
      Projects: [],
      doing:false,
      done:false,
      genera:false
    };
  },
  created() {
    this._GetProjects();
   
  },
  methods: {
    _GetProjects() {
      GetProjects().then(res => {
        if (res.StatusCode === 200) {
          this.Projects = res.Data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 推荐项目 */
.project-recommendation {
  height: 50px;
  overflow: hidden;
  border-top: 10px solid #f4f4f4;
  padding: 0 12px;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
   .title_p{
    font-weight: bold;
  }
  > :first-child {
    font-size: 16px;
    color: #282828;
  }
  > :last-child {
    font-size: 14px;
    color: #999999;
    > span {
      float: left;
      display: block;
    }
    > .icon {
      display: block;
      float: left;
      margin-top: 3px;
    }
  }
}
// 每一个收藏的项目
.project-item {
  overflow: hidden;
  display: block;
  border-bottom: 10px solid #f4f4f4;

  // 第一行
  .project-item-1 {
    font-size: 16px;
    color: #282828;
    padding: 0 12px;
    overflow: hidden;
    margin-bottom: 18px;
    margin-top: 21px;
    .item1-left {
      display: block;
      float: left;
    }
    .item1-right {
      display: block;
      float: right;
      color: #ffffff;
      font-size: 12px;
      padding: 0px 8px;
      background: #3887fe;
      border-radius: 9px;
      margin-top: 2.5px;
    }
    .doing {
      background: #fd4f00;
    }
    .done {
      background: #999999;
    }
  }
  //第二行
  .project-item-2 {
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    .item {
      text-align: center;
      display: flex;
      align-items: center;
    }
    .project-item-type {
      span {
        
        color: #666666;
      }
      .type-special {
        color: #999999;
      }
      .icon {
        margin-right: 5px;
        color: #999999;
       
      }
    }
    .project-item-time {
      span {
        color: #666666;
      }
      .type-special {
        color: #999999;
      }
      .icon {
        margin-right: 5px;
        color: #999999;
         font-size: 16px;
         margin-left:-2px;
      }
    }
    .project-item-price {
      .price-left {
        color: #999999;
        // padding-left: 12px;
        margin-top: 1px;
        display: block;
        float: left;
      }
      .price-right {
        color: #fd4f00;
        font-size: 16px;
        display: block;
        float: left;
      }
    }
  }
  //  第三行
  .project-item-3 {
    overflow: hidden;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 12px;
    color: #999999;
    margin-bottom: 21px;
    font-size: 14px;
    .item3-left {
      float: left;
      display: flex;
      align-items: center;
      span {
        float: left;
        display: block;
      }
      .fenge {
        width: 1px;
        height: 11px;
        border: 1px solid #999999;
        display: block;
        float: left;
        margin-left: 9px;
        margin-right: 9px;
      }
    }
    .item3-right {
      float: right;
    }
  }
}
</style>
